<template>
  <div class="home-container">
    <!-- 头部搜索框 -->
    <van-search
      shape="round"
      disabled
      placeholder="请输入搜索关键词"
      @click="handleChange"
    />

    <!-- 轮播图部分 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in banner" :key="item.key">
        <img :src="item.image_url" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 遮罩层 -->
    <transition name="van-fade">
      <div class="shadow" v-show="$store.state.isShadow"></div>
    </transition>

    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// 导入homeAPI接口
import { homeAPI } from '@/api/homeAPI.js'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      // 轮播图数据数组
      banner: []
    }
  },
  methods: {
    // 获取首页的数据
    async getHomeList() {
      const { data: res } = await homeAPI()
      // console.log(res)
      if (res.errno !== 0) {
        return this.$toast.fail('获取资源失败')
      }
      // 将响应回来的轮播图资源存储到data数据源中,使用banner来接收
      this.banner = res.data.banner
    },
    // 点击跳转搜索页面
    handleChange() {
      this.$router.push('/home/searchPopup')
      // 把遮罩层的显示状态改为true
      this.$store.commit('isShadowChange', true)
    }
  },
  created() {
    this.getHomeList()
  }
}
</script>

<style lang="less" scoped>
// 过渡开始前元素的位置
// .slide-enter, .slide-leave-to {
//   transform: translateX(100%);
// }

// // 过渡开始的动画
// .slide-enter-active, .slide-leave-active {
//   transition: all .4s ease;
// }

// // 过渡完成后元素的位置
// .slide-enter-to, .slide-leave {
//   transform: translateX(0);
// }
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
